<template>
  <div v-loading="loading">
    <div v-if="isNullData">
      <div class="app-container">
        <el-card class="box-card">
          <div slot="header">
            <h4 class="link-type link-title" target="_blank" >
              {{ $t('organization.nullDataTips') }}
              <el-button type="success" icon="el-icon-plus" circle @click="dialogFormVisible = true"></el-button>
            </h4>
            <h4 class="link-type link-title" target="_blank" >
            <el-button type="primary" plain @click="joinOrg()">加入已有组织</el-button>
          </h4>
          </div>
          <div class="box-item">
            <code style="margin-top:15px;">{{ $t('organization.tips') }}</code>
          </div>
        </el-card>
      </div>
      <el-dialog :title="$t('organization.create')" :visible.sync="dialogFormVisible">
        <el-form :model="orgFrom" :rules="orgRules">
          <el-form-item label="组织名称" :label-width="formLabelWidth" prop="name">
            <el-input v-model="orgFrom.name" name="name" autocomplete="on"></el-input>
          </el-form-item>
          <el-form-item label="组织描述" :label-width="formLabelWidth">
            <el-input v-model="orgFrom.depiction" name="depiction" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click.native.prevent="createOrg">确 定</el-button>
        </div>
      </el-dialog>

    </div>
    <div v-else>
      <el-table :data="orgList" style="width: 100%;padding-top: 15px;" border>
        <el-table-column :label="$t('table.id')" align="center" type="index" width="50">
        </el-table-column>
        <el-table-column :label="$t('table.name')" align="center" >
          <template slot-scope="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.depiction')" align="center">
          <template slot-scope="scope">
            {{ scope.row.depiction }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.member')" align="center">
          <template slot-scope="scope">
            <a class="link-type" @click="getOrgMember(scope.row.orgId, userId == scope.row.userIdCreate)">{{ scope.row.member }}人</a>
          </template>
        </el-table-column>

        <el-table-column :label="$t('table.actions')" align="center">
          <template slot-scope="scope">
            <el-button @click="getOrg(scope.row.orgId)" type="text" >查看</el-button>
            <el-button v-if="userId == scope.row.userIdCreate" @click="getInviteCode(userId, scope.row.orgId)" type="text" >邀请码</el-button>
            <el-button v-if="userId == scope.row.userIdCreate" type="text" >编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog :title="$t('organization.Members')" :visible.sync="dialogOrgMember">

      <el-table :data="memberList" style="width: 100%;padding-top: 15px;" border>
        <el-table-column :label="$t('table.id')" align="center" type="index" width="50">
        </el-table-column>
        <el-table-column :label="$t('table.name')" align="center" >
          <template slot-scope="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.username')" align="center">
          <template slot-scope="scope">
            {{ scope.row.username }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.email')" align="center">
          <template slot-scope="scope">
            {{ scope.row.email }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.actions')" align="center">
          <template slot-scope="scope">
            <el-button @click="getUser(scope.row.userId)" type="text" >查看</el-button>

            <el-button v-if="isSelfOrg" @click="deleteMember(scope.row.userId)" type="text" >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogOrgMember = false">确  定</el-button>
      </div>
    </el-dialog>
  </div>


</template>
<script>
import { mapGetters } from 'vuex'
import { getMyOrgs, saveOrg, getOrg, getOrgMember, getInviteCode, joinOrg } from '@/api/organization'
export default {
  name: 'Organization',
  data() {
    const validateName = (rule, value, callback) => {
      if (value.length < 3) {
        callback(new Error('The username can not be less than 3 digits'))
      } else {
        callback()
      }
    }
    return {
      orgRules:{
        name: [{ required: true, trigger: 'blur', validator: validateName }]
      },
      orgFrom: {name: '', depiction: ''},
      memberList: null,
      orgList: null,
      myOrgId: '',
      loading: true,
      dialogFormVisible: false,
      dialogOrgMember: false,
      isNullData: true,
      isSelfOrg: false,
      formLabelWidth: '120px'
    }
  },
  created() {
    this.myOrgs()
  },
  computed: {
    ...mapGetters([
      'userId'
    ])
  },
  methods: {
    myOrgs() {
      getMyOrgs().then(response => {
        this.orgList = response.data.orgs
        if(this.orgList.length == 0){
          this.isNullData = true
        }else {
          this.isNullData = false
        }
      })
      this.loading = false
    },
    createOrg() {
      this.loading = true
      saveOrg(this.orgFrom).then(response => {
        const data = response.data
        if(data.code != 0){
          this.$message.error(data.msg);
        }else {
          this.$message({
            message: data.msg,
            type: 'success'
          });
        }
        this.loading = false
      })
    },
    getOrg(orgId) {
      this.loading = true
      getOrg(orgId).then(response => {
        const data = response.data
        if(data.code == 0){
          this.orgFrom = data.org
        }else {
          this.$message.error(data.msg);
        }
        this.loading = false
      })
    },
    getOrgMember(orgId, isSelfOrg) {
      this.loading = true
      this.myOrgId = orgId
      getOrgMember(orgId).then(response => {
        const data = response.data
        if(data.code == 0){
          this.memberList = data.members
          this.dialogOrgMember = true
        }else {
          this.$message.error(data.msg);
        }
        this.loading = false
        this.isSelfOrg = isSelfOrg
      })
    },
    getInviteCode(userId, orgId) {
      getInviteCode(userId, orgId).then(response => {
        const data = response.data
        if(data.code == 0){
          this.$alert('加入组织邀请码(1小时内有效)：' + data.inviteCode, '邀请码', {
            confirmButtonText: '确定',
          });
        }else {
          this.$message.error(data.msg);
        }
      })
    },
    joinOrg(){
      this.$prompt('请输入邀请码', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /\d{8}/,
        inputErrorMessage: '邀请码格式不正确'
      }).then(({ value }) => {
        joinOrg(value).then(response => {
          const data = response.data
          if(data.code == 0){
            this.$message({
              type: 'success',
              message: data.msg
            });
          }else {
            this.$message({
              type: 'warning',
              message: data.msg
            });
          }
        })
      }).catch(() => {

      });
    }

  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .field-label{
    vertical-align: middle;
  }
  .box-card {
    width: 400px;
    max-width: 100%;
    margin: 20px auto;
  }

  .block {
    padding: 30px 24px;
  }

  .tag-item {
    margin-right: 15px;
  }
</style>
